<template>
  <SzCrudSingle ref="refSzCrudSingle" :cellClassName="cellClassName" :header-cell-class-name="headerCellClassName"
                :crm-type="crmType"
                :create-type="crmType"
                addBtnText="新建回款"
                search-place-holder="请输入客户名称/回款编号">
    <template v-slot:detail="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <ReceivablesDetail v-model:visible="crmOption.showDview"
                         v-model:id="elTableOption.rowID"
                         :crmOptionChange="crmOptionChange"
                         :page-list="crmOption.crmType == elTableOption.rowType ? fieldAndListOption.dataList : []"
                         v-model:page-index="elTableOption.rowIndex"
                         class="d-view" @hide-view="crmOption.showDview=false"
                         @handle="handleHandle"></ReceivablesDetail>
    </template>
    <template v-slot:pagination-left>
      <span v-if="moneyPageData" class="money-bar">回款金额：{{ separator(moneyPageData.receivablesMoney || 0) }}</span>
    </template>

    <template v-slot:create="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <ReceivablesCreate v-if="crmOption.createShow" :createAction="crmOption.createAction"
                         @close="crmOption.createShow = false"
                         @save-success="handleHandle"/>
    </template>
    <template slot="eof">
      <!-- 审批流升级提醒 -->
      <approval-flow-update-dialog/>
    </template>
  </SzCrudSingle>
</template>


<script setup>
import SzCrudSingle from "/src/views/crm/componentsNew/SzCrud/SzCrud.vue";
import {useNumberHook} from "@/hooks/useNumberHook.js";
import ReceivablesCreate from './Create.vue'
import ReceivablesDetail from './Detail.vue'

import {floatAdd} from '/src/utils/index.js'


defineOptions({
  /** 客户管理 的 产品列表 */
  name: 'ReceivablesIndex',
})


const crmType = ref('receivables')
const {separator} = useNumberHook();

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'number') {
    return 'can-visit--underline can-visit--bold'
  } else if (
      column.property === 'customerName' ||
      column.property === 'contactsName'
  ) {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

// todo whf 可以考虑将这个放入szCrudSignle的props中
function headerCellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'number') {
    return 'header-can-visit-backgroud'
  }
  return ''
}

const refSzCrudSingle = ref()
const moneyPageData = computed(() => {
  if (!refSzCrudSingle.value) {
    return
  }
  // 选择数据，隐藏金额信息
  console.log("refSzCrudSingle.value", refSzCrudSingle.value)
  if (refSzCrudSingle.value.config.isSelect) {
    return false
  }

  if (refSzCrudSingle.value.elTableOption.selectionList.length == 0) {
    // 如果没有选择，就显示全部的数据
    let money = 0.0
    let dataList = refSzCrudSingle.value.fieldAndListOption.dataList
    for (let index = 0; index < dataList.length; index++) {
      const element = dataList[index]
      money = floatAdd(money, parseFloat(element.money))
    }
    return {
      businessSumMoney: money.toFixed(2)
    }
  } else {
    // 如果选择了列表，则计算选中的列表
    let money = 0.0
    for (let index = 0; index < refSzCrudSingle.value.elTableOption.selectionList.length; index++) {
      const element = refSzCrudSingle.value.elTableOption.selectionList[index]
      money = floatAdd(money, parseFloat(element.money))
    }
    return {
      businessSumMoney: money.toFixed(2)
    }
  }
})


</script>


<style lang="scss" scoped>
@import '../styles/table';
</style>
